<template>
  <div class="add_Address" :style="{'min-height':winHeight + 'px'}">
    <ul class="location">
      <li>
        <span>联系人</span>
        <input v-model="name" type="text" placeholder="姓名">
      </li>
      <li>
        <span>手机号码</span>
        <input v-model="phone" type="text" placeholder="11位手机号码">
      </li>
      <li>
        <span>选择地区</span>
        <input id="sel_city" @click="showAddressPicker" type="text" v-model="location" placeholder="省 市 区/县">
        <!-- <cube-button @click="showAddressPicker">Address Picker</cube-button> -->
      </li>
      <li>
        <span>详细地址</span>
        <input v-model="address" type="text" placeholder="街道门派信息">
      </li>
    </ul>
    <div class="save" v-if="!oldlocation" @click="addAddr('save')">保存</div>
    <div class="save" v-else @click="addAddr('change')">保存修改</div>
    <div class="del" v-if='oldlocation' @click="del">删除地址</div>
    <div class="close" @click="back">取消</div>
  </div>
</template>

<script>
import { provinceList, cityList, areaList } from '../common/js/area.js'
import $ from 'jquery'
import axios from 'axios'
const addressData = provinceList
addressData.forEach(province => {
  province.children = cityList[province.value]
  province.children.forEach(city => {
    city.children = areaList[city.value]
  })
})
export default {
  data () {
    return {
      winHeight: '',
      location: '',
      name: '',
      phone: '',
      address: '',
      province: '',
      city: '',
      area: '',
      oldlocation: ''
    }
  },
  methods: {
    showAddressPicker () {
      this.addressPicker.show()
    },
    selectHandle (selectedVal, selectedIndex, selectedText) {
      this.location = selectedText
    },
    cancelHandle () {

    },
    addAddr (mod) {
      const toast = this.$createToast({
        txt: 'Loading...',
        mask: true
      })
      this.province = this.location[0]
      this.city = this.location[1]
      this.area = this.location[2]
      if (this.name == '') {
        this.$createDialog({
          type: 'alert',
          title: '请输入姓名',
          icon: 'cubeic-alert',
          showClose: false
        }).show()
      } else if (!(/^1[3|4|5|8][0-9]\d{4,8}$/.test(this.phone))) {
        this.$createDialog({
          type: 'alert',
          title: '请输入正确的电话',
          icon: 'cubeic-alert',
          showClose: false
        }).show()
      } else if (this.location == '') {
        this.$createDialog({
          type: 'alert',
          title: '请选择地区',
          icon: 'cubeic-alert',
          showClose: false
        }).show()
      } else if (this.address == '') {
        this.$createDialog({
          type: 'alert',
          title: '请输入详细地址',
          icon: 'cubeic-alert',
          showClose: false
        }).show()
      } else {
        var urls
        if (mod == 'save') {
          urls = 'addAddress/' + '/mid/' + 398 + '/name/' + this.name + '/tel/' + this.phone + '/province/' + this.province + '/city/' + this.city + '/area/' + this.area + '/address/' + this.address
        } else if (mod == 'change') {
          urls = 'eidtAddress/' + '/mid/' + 398 + '/id/' + this.oldlocation.id + '/name/' + this.name + '/tel/' + this.phone + '/province/' + this.province + '/city/' + this.city + '/area/' + this.area + '/address/' + this.address + '/status/' + this.oldlocation.status
        }
        axios.post('/api/' + urls).then(e => {
          toast.show()
          if (e.data.code == 1) {
            toast.hide()
            this.$createDialog({
              type: 'alert',
              title: '请求成功',
              icon: 'cubeic-alert',
              showClose: false,
              onConfirm () {
                window.location.href = '#/address'
              }
            }).show()
          }
        })
      }
    },
    back () {
      window.location.href = '#/address'
    },
    del () {
      var urls = 'delAddress' + '/mid/' + 398 + '/id/' + this.oldlocation.id
      axios.post('/api/' + urls).then(e => {
        if (e.data.code == 1) {
          this.$createDialog({
            type: 'alert',
            title: '删除成功',
            icon: 'cubeic-alert',
            showClose: false,
            onConfirm () {
              window.location.href = '#/address'
            }
          }).show()
        }
      })
    }
  },
  created () {
    console.log(typeof (this.$route.query.oldlocation))
    if (typeof (this.$route.query.oldlocation) === 'object') {
      this.$cookies.set('oldlocation', this.$route.query.oldlocation)
    }
    if (this.$route.query.oldlocation) {
      this.oldlocation = this.$cookies.get('oldlocation')
    } else {
      this.oldlocation = ''
    }
    console.log(this.oldlocation)
    if (this.oldlocation) {
      this.name = this.oldlocation.name
      this.phone = this.oldlocation.tel
      this.province = this.oldlocation.province
      this.city = this.oldlocation.city
      this.area = this.oldlocation.area
      this.address = this.oldlocation.address
      this.location = [this.oldlocation.province, this.oldlocation.city, this.oldlocation.area]
    }
    this.winHeight = $(window).height()
  },
  mounted () {
    this.addressPicker = this.$createCascadePicker({
      title: '选择地址',
      data: addressData,
      onSelect: this.selectHandle,
      onCancel: this.cancelHandle
    })
  }
}
</script>

<style>
input::-webkit-input-placeholder{
  font-size: 0.28rem;
}
input:-moz-placeholder{
  font-size: 0.28rem;
}
input::-moz-placeholder{
  font-size: 0.28rem;
}
input:-ms-input-placeholder{
  font-size: 0.28rem;
}

.add_Address{
  background-color: #f2f2f2;
  z-index: 50;
}
.location{
  width: 6.9rem;
  padding: 0 0.3rem;
  background-color: #ffffff;
  margin-top: 0.3rem;
}
.location li{
  width: 100%;
  height: 0.9rem;
  border-bottom: 1px solid #eeeeee;
  display: flex;
  align-items: center;
}
.location li:last-of-type{
  border-bottom: none;
}
.location li span{
  font-size: 0.28rem;
  color: #222222;
  flex: 1;
}
.location li input{
  width: 5rem;
  font-size: 0.28rem;
  outline: none;
  height: 100%;
}
.save{
  width: 6.9rem;
  height: 0.9rem;
  background-color: #CE3C39;
  font-size: 0.36rem;
  color: #ffffff;
  line-height: 0.9rem;
  text-align: center;
  margin: 0.3rem auto 0;
  border-radius: 0.12rem;
}
.close{
  width: 6.9rem;
  height: 0.9rem;
  background-color: #ffffff;
  font-size: 0.36rem;
  color: #222222;
  line-height: 0.9rem;
  text-align: center;
  margin: 0.3rem auto 0;
  border-radius: 0.12rem;
}
.del{
  width: 6.9rem;
  height: 0.9rem;
  background-color: #CE3C39;
  font-size: 0.36rem;
  color: #ffffff;
  line-height: 0.9rem;
  text-align: center;
  margin: 0.3rem auto 0;
  border-radius: 0.12rem;
}
</style>
